<template>
    <Header />
    <div class="forget">
        <div class="forget-box">
            <div class="forget-title">找回密码</div>
            <div class="forget-inputbox">
                <div class="forget-label">账号</div>
                <div class="forget-input">
                    <a-input placeholder="请输入登录时的邮箱或手机号" class="large-input" v-model:value="data.userCode"></a-input>
                </div>
            </div>
            <div class="forget-inputbox">
                <div class="forget-label">图形验证码</div>
                <div class="forget-input">
                    <a-input placeholder="请输入图形验证码" class="large-input" v-model:value="data.imgCode"></a-input>
                    <img src="" class="imgCode" />
                </div>
            </div>
            <div class="forget-inputbox">
                <div class="forget-label">验证码</div>
                <div class="forget-input">
                    <a-input placeholder="请输入账号手机/邮箱收到的验证码" class="large-input" v-model:value="data.code">
                    <template #suffix>
                        <a style="color:#333;">发送验证码</a>
                    </template>
                    </a-input>
                </div>
            </div>
            <div class="forget-inputbox">
                <div class="forget-label">新密码</div>
                <div class="forget-input">
                    <a-input placeholder="请设置密码" class="large-input" v-model:value="data.password"></a-input>
                </div>
            </div>
            <div class="forget-inputbox">
                <div class="forget-label">确认密码</div>
                <div class="forget-input">
                    <a-input placeholder="请再次输入设置的密码" class="large-input" v-model:value="data.confirmPassword"></a-input>
                </div>
            </div>
            <a-button type="primary" block class="login-btn">确认修改</a-button>
            <router-link to="/login">登录现有账号</router-link>
        </div>
    </div>
</template>

<script>
// import httpRequest from "@/util/httpRequest";
import Header from "@/components/header";
import {Input,Button} from "ant-design-vue";
export default {
    components:{
        Header,
        AInput:Input,
        AButton:Button
    },
    data() {
        return {
            userName:'',
            password:'',
            code:'',
            remember:true,
            data:{}
        };
    },
    created(){

    },
    mounted() {
        
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.forget{
    margin:30px 20px;
    background: #fff;
    &-box{
        width: 600px;
        margin:0 auto;
        padding-top: 60px;
        padding-bottom: 50px;
        text-align: left;
        .forget-title{
            font-size: 28px;
            color: #333;
        }
        .forget-inputbox{
            margin:20px 0;
        }
        .forget-label{
            font-size: 20px;
            color:#333;
            &.required{
                &:before{
                    content: "*";
                    color: red;
                }
            }
        }
        .forget-input{
            display: flex;
            img.imgCode{
                width: 112px;
                height: 48px;
                margin-left: 8px;
            }
            .large-input{
                padding: 12px 11px;
            }
        }
        .login-btn{
            height: 48px;
            border-radius:5px;
            margin-bottom: 10px;
        }
    }
}
</style>
